<html>
	<head>		
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" type="text/css"/>		
		
		<style type="text/css">
			body {
				font-size: 12px;
			}
						
		</style>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>	
		<script type="text/javascript" src="../js/jquery-ui-plugins-core.js"></script>
		<script type="text/javascript" src="../js/jquery-ui-plugins-textinput.js"></script>
	</head>
	<body>
		<div>
			<label>Numbers Only</label>
			<input type="text" class="numbersOnly"/>
		</div>
		
		<div>
			<label>Numbers Only #2</label>
			<input type="text" class="numbersOnly"/>
		</div>
		
		<div>
			<label>Digits Only</label>
			<input type="text" class="digitsOnly"/>
		</div>
		
		<div>
			<label>Letters Only #2</label>
			<input type="text" class="alpha"/>
		</div>
		
		<div>
			<label>Only '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '[', '{', '}', '|', ':', ';', ',', '<', '>', '.', '?', '/', '"', '=', '-', '\\', '~', '`', ']', "'"</label>
			<input type="text" class="whitelist"/>
		</div>
		
		<div>
			<label>Not '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '[', '{', '}', '|', ':', ';', ',', '<', '>', '.', '?', '/', '"', '=', '-', '\\', '~', '`', ']', "'"</label>
			<input type="text" class="blacklist"/>
		</div>	
		
		<div>
				<label>Test Set Options</label>
				<input id="optionsTest" />
			</div>
			<fieldset id="options">	
				<legend>Options</legend>				
				<div>
					<label>Allow Chars:</label>
					<input id="allow" type="text" class="charList" />
					<button id="setAllow" class="charListButton">Set Allow</button>
				</div>				
				<div>
					<label>Whitelist:</label>
					<input id="whitelist" type="text" class="charList" />
					<button id="setWhitelist" class="charListButton">Set Whitelist</button>
				</div>
				<div>
					<label>Blacklist:</label>
					<input id="blacklist" type="text" class="charList" />
					<button id="setBlacklist" class="charListButton">Set Blacklist</button>
				</div>
				<div>
					<label>Stylize:</label>
					<select id="stylize">
						<option>true</option>
						<option>false</option>
					</select>
					<button id="setStylize" >Set Stylize</button>
				</div>
				<div>
					<label>Filter:</label>
					<select id="filter">
						<option value="numeric">Numeric</option>
						<option value="digits">Digits</option>
						<option value="alpha">Alpha</option>						
					</select>
					<button id="setFilterButton">Set Filter</button>
				</div>								
			</fieldset>
		
		<script type="text/javascript">
			$(function() {				
				$('input.numbersOnly').textinput({'filter': 'numeric'});
				
				$('input.digitsOnly').textinput({'filter': 'digits'});
				
				$('input.alpha').textinput({'filter': 'alpha'});
								
				$('input.whitelist').textinput({'whitelist': ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '[', '{', '}', '|', ':', ';', ',', '<', '>', '.', '?', '/', '"', '=', '-', '\\', '~', '`', ']', "'"]});
				
				$('input.blacklist').textinput({'blacklist': ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '[', '{', '}', '|', ':', ';', ',', '<', '>', '.', '?', '/', '"', '=', '-', '\\', '~', '`', ']', "'"]});
				
				$('#optionsTest').textinput({
					'filter': 'numeric',
					'keyEventSuppressed': function(event, data) {
						console.log(data.key + " suppressed");
					},
					'enable': function(event, data) {
						console.log('enabled');
					},
					'disable': function(event, data) {
						console.log('disabled');
					},
					"create": function() {
						console.log("created!!");
					},
				});
				
				$('button.charListButton').click(function() {
					var $this = $(this);
					var $input = $(this).prev('input.charList');
					
					$('#optionsTest').textinput('option', $input.attr('id'), $input.val());					
				});
				
				$('#setFilterButton').click(function() {			
					$('#optionsTest').textinput('option', 'filter', $('#filter').val());					
				});
				
				$('#setStylize').click(function() {
					$('#optionsTest').textinput('option', 'stylize', $('#stylize').val());
				});
			});
			
		</script>
	</body>
</html>
